<template>
	<view>
		<view class="header-box">
			<head-left-nav :title-color="'#303133'" is-back-show="true"></head-left-nav>
		</view>
		<view style="position: absolute;top: 200rpx;width: 100%;">
			<view class="main_box">
				<view class="doctorInfo">
					<image :src="detail.image" mode="" class="doctor_img"></image>
					<view class="flex" style="height: 250rpx;">
						<view class="flex flexColumn" style="padding-top: 100rpx;padding-left: 30rpx;">
							<view class="flex align-end">
								<view class="name" style="font-size: 48rpx;color: #3F3F3F;">{{ detail.name }}</view>
								<view class="common_text" style="margin-left: 10rpx;">{{ detail.professionalTitle }} | {{ detail.department }}</view>
							</view>
							<view class="common_text hospitalName">{{ detail.hospital }}</view>
						</view>
						<view class="flex alignC right" v-if="detail.qrCodeImg">
							<view class="icon flex flexColumn alignC">
								<image src="/static/consult_icon.png" mode=""></image>
								<text>咨询加我</text>
							</view>
							<view class="qrcode">
								<image :src="detail.qrCodeImg[0].url" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 擅长 -->
				<view class="doctorIntro">
					<view class="common_title flex alignC">擅长</view>
					<view class="cont" v-if="detail.specialty">
						{{detail.specialty}}
					</view>
					<view class="cont" v-else>
						暂无内容
					</view>
					<view class="common_title flex alignC">简介</view>
					<view class="cont" v-if="detail.details">
						{{detail.details}}					
					</view>
					<view class="cont" v-else>
						暂无内容
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headLeftNav from '@/components/HeadLeftNav.vue';
	import {
		getDoctorDetailApi,
		getDoctorVideoApi
	} from '../../common/api/doctorApi.js'
	export default {
		components: {
			headLeftNav
		},
		data() {
			return {
				id: 0,
				detail: {},
				active: 0,
				wh: 0,
				videoList: [],
				cover: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				}
			}
		},
		async onLoad(option) {
			this.id = option.id
			this.getDoctorDetail()
		},
		methods: {
			async getDoctorDetail() {
				const res = await getDoctorDetailApi(this.id)
				this.detail = res.data
				// this.getVideoList()
			},
		}
	}
</script>

<style lang="scss" scoped>
.header-box {
	background: linear-gradient( 180deg, #D5F0F0 0%, rgba(248,248,248,0) 100%);
	width: 100%;
	height: 500rpx;
	background-size: 100% 100%;
}
.main_box{
	.doctorInfo{
		background: #fff;
		position: relative;
		height: 250rpx;
		margin-top: 60rpx;
		.doctor_img{
			width: 158rpx;
			height: 158rpx;
			border: 2rpx solid #3FBEBB;
			border-radius: 50%;
			position: absolute;
			top: -85rpx;
			left: 30rpx;
		}
		.hospitalName{
			margin-top: 20rpx;
		}
		.common_text{
			font-size: 28rpx;
			color: #7A7A7A;
		}
		.icon{
			margin-left: 40rpx;
			position: absolute;
			right: 260rpx;
			image{
				width: 30rpx;
				height: 32rpx;
			}
			text{
				color: #3FBEBB;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
		.qrcode{
			position: absolute;
			right: 30rpx;
			image{
				width: 190rpx;
				height: 190rpx;
			}
			
		}
	}
	.doctorIntro{
		margin-top: 30rpx;
		background: #fff;
		height: 1064rpx;
		.cont{
			margin: 32rpx;
			padding: 30rpx;
			background: #F6F6F8;
			border-radius: 24rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #838383;
			font-family: PingFang SC, PingFang SC;
		}
	}
}
.common_title{
	font-size: 32rpx;
	color: #000000;
	height: 80rpx;
	margin: 30rpx;
	padding-left: 20rpx;
	position: relative;
}
.common_title::before{
	content: '';
	width: 8rpx;
	height: 30rpx;
	background: #3FBEBB;
	border-radius: 37rpx;
	position: absolute;
	left: 0;
}
</style>
